<!--  详情页      -->


<template>
  <div class="details">
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- sku选项卡 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />

    <!-- 底部商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
//引入商品详情页面数据请求和加入购物车功能请求
import { getDetailsData, getAddCart } from "@/utils/http.js";
export default {
  created() {
    getDetailsData({ id: 1181003 }).then((res) => {
      console.log(111, res);
      let goodsData = res.data.data;
      this.gallery = goodsData.gallery;
      this.goods.picture = goodsData.info.list_pic_url;
      this.sku.price = goodsData.info.retail_price;
      this.sku.stock_num = goodsData.info.goods_number;
    });
    let params = {
      goodsId: 1181003,
      productId: "",
      number: "",
    };
    getAddCart(params).then((res) => {
      console.log(222, res);
    });
  },
  data() {
    return {
      gallery: [], //轮播图路径

      //sku数据
      show: false,
      goods: {
        picture: "", // 商品 sku 缩略图
      },
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
    };
  },
  methods: {
    //点击添加购物车按钮
    addCart() {
      this.show = true;
    },

    //sku点击添加购物车
    onAddCartClicked() {
      console.log("加入购物车");
    },
    //sku点击立即购买
    onBuyClicked() {
      console.log("立即购买");
    },
  },
};
</script>

<style>
</style>